<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import type { LoginUserBind, LoginUserInfo, LoginUserModifyCmd } from '@/apis/common/loginApi'
import { Icon } from '@iconify/vue'
import { onMounted, reactive, ref } from 'vue'
import { loginApi } from '@/apis/common/loginApi'
import BaseCard from '@/layouts/BaseCard.vue'
import UserBindOptions from './components/UserBindOptions.vue'
import UserInfoCaptchaDialog from './components/UserInfoCaptchaDialog.vue'

const loginUserInfo = ref<LoginUserInfo>()

async function loadData() {
  loginUserInfo.value = await loginApi.getLoginAccount(true)
}
const rules = reactive<FormRules<LoginUserModifyCmd>>({
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 32, message: '昵称长度必须 2～32', trigger: 'blur' },
  ],
  phone: [
    { pattern: /\d{8,11}$/, message: '手机号码格式错误', trigger: 'blur' },
  ],
  email: [
    { type: 'email', message: '电子邮箱格式错误', trigger: 'blur' },
  ],
})

onMounted(loadData)

const formRef = ref<FormInstance>()
async function save(name: string, value: any) {
  const data: any = { }
  data[name] = value
  await loginApi.modifyLoginUser(data)
  ElMessage.success('保存成功')
}

const captchaDialog = ref<InstanceType<typeof UserInfoCaptchaDialog>>()

async function unBind(data: LoginUserBind) {
  await loginApi.unbindAccount({ id: data.id, loginType: data.type })
  ElMessage.success('解除绑定成功')
  await loadData()
}
</script>

<template>
  <BaseCard v-if="loginUserInfo" title="基本信息">
    <el-form ref="formRef" :model="loginUserInfo" :rules="rules">
      <div class="grid grid-cols-2">
        <div class="item col-span-2">
          <div class="item-label">
            头像
          </div>
          <Upload
            v-model="loginUserInfo.avatarId"
            v-model:file-url="loginUserInfo.avatarUrl"
            group-name="FILE_DEFAULT"
            @success="save('avatarId', loginUserInfo?.avatarId)"
          >
            <template #default="{ fileUrl }">
              <el-avatar :size="60" :src="fileUrl" />
            </template>
          </Upload>
        </div>
        <div class="item">
          <div class="item-label">
            用户名
          </div>
          <div>
            {{ loginUserInfo?.nickname }}
          </div>
        </div>
        <div class="item">
          <div class="item-label">
            昵称
          </div>
          <RowEditItem v-model="loginUserInfo.nickname" prop="nickname" :save="() => save('nickname', loginUserInfo?.nickname)" />
        </div>
        <div class="item">
          <div class="item-label">
            手机号码
          </div>
          <div>
            {{ loginUserInfo.phone }}
          </div>
          <Icon icon="tdesign:edit-2" class="cursor-pointer text-active" @click="captchaDialog?.open('phone')" />
        </div>
        <div class="item">
          <div class="item-label">
            电子邮箱
          </div>
          <div>
            {{ loginUserInfo.email }}
          </div>
          <Icon icon="tdesign:edit-2" class="cursor-pointer text-active" @click="captchaDialog?.open('email')" />
        </div>
      </div>
    </el-form>
  </BaseCard>
  <BaseCard title="角色信息" class="mt-2">
    <el-tag
      v-for="role in loginUserInfo?.roles" :key="role.code"
      size="large"
      effect="plain"
    >
      {{ role.name }}
    </el-tag>
  </BaseCard>
  <BaseCard title="账号绑定" class="mt-2">
    <el-table
      :data="loginUserInfo?.binds"
      show-overflow-tooltip
      stripe border size="small"
      empty-text="无绑定关系"
      style="width: 440px;"
    >
      <el-table-column type="index" label="#" width="80" align="center" />
      <el-table-column prop="typeName" label="类型" width="120" align="center" />
      <el-table-column prop="createTime" label="绑定时间" width="160" align="center" />
      <el-table-column label="操作" width="80" align="center">
        <template #default="{ row }">
          <el-button type="danger" link @click="unBind(row)">
            解除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <UserBindOptions />
  </BaseCard>
  <UserInfoCaptchaDialog ref="captchaDialog" @success="loadData" />
</template>

<style scoped>
.item {
  --at-apply: flex flex-row items-center text-sm my-2 gap-2;
}
.item-label {
  --at-apply: w-24 text-justify font-500;
}
</style>
